import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/utils/widget_state_property.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class RadioPage extends PageWithTitle {
  const RadioPage({super.key}) : super("单选按钮(Radio、RadioListTile)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("单选按钮用于在多个选项中选择一个的需求场景"),
      AppSpacer.large,
      _RadioExample(),
      UlItem("Radio"),
      BodyText("单选按钮"),
      PrimaryHeaderLabelText(
        "value",
        "这个单选按钮对应的选项数值，当被选中时会通过onChanged回调当前选中的数值",
      ),
      PrimaryHeaderLabelText(
        "groupValue",
        "这个单选按钮所在的按钮组当前选中数值，内部会比较分组选中数值与单选按钮的选项数值来确认"
            "自身是否处于选中状态",
      ),
      PrimaryHeaderLabelText(
        "onChanged",
        "监听状态改变，同个分组的单选按钮可以使用同个回调进行分组选中数值的更新，重建组件以同步"
            "状态更新",
      ),
      PrimaryHeaderLabelText(
        "toggleable",
        "切换状态，点击已选择的单选按钮时可以取消选中，默认false，启用后可以用于非强制选择的场景",
      ),
      PrimaryHeaderLabelText(
        "fillColor",
        "组件状态颜色>",
        "构建时指定的状态颜色activeColor、focusColor、hoverColor>",
        "主题配置radioTheme.fillColor>",
        "colorScheme.primary+colorScheme.onSurfaceVariant",
      ),
      PrimaryHeaderLabelText(
        "activeColor",
        "激活(选中)状态颜色",
      ),
      PrimaryHeaderLabelText(
        "focusColor",
        "取得焦点状态颜色",
      ),
      PrimaryHeaderLabelText(
        "hoverColor",
        "鼠标悬停状态颜色",
      ),
      PrimaryHeaderLabelText(
        "overlayColor",
        "按压图层颜色>",
        "当前按钮显式配置的颜色（activeColor、focusColor、hoverColor）+透明度"
            "(kRadialReactionAlpha)>",
        "主题配置radioTheme.overlayColor ",
        "默认onSurface+onPrimary 透明度(0.1)",
      ),
      PrimaryHeaderLabelText(
        "splashRadius",
        "按压图层半径",
      ),
      PrimaryHeaderLabelText(
          "materialTapTargetSize",
          "组件尺寸枚举，遵循Material设计，提供了shrinkWrap(不显著影响交互下的最小尺寸)、"
              "padded(便于点击的至少48x48的尺寸)两个选项>",
          "主题配置radioTheme.materialTapTargetSize>",
          "全局主题配置theme.materialTapTargetSize（默认移动端padded，桌面端shrinkWrap）"),
      AppSpacer.large,
      _RadioListTileExample(),
      AppSpacer.mini,
      UlItem("RadioListTile"),
      BodyText("带标签的单选按钮，因为我们常常需要为单选按钮附加文本说明，若自己去添"
          "加text实现又不是很方便，因为通常点击文本也意味用户想选择它"),
      NoticeText("radio组件支持的属性它都支持，这里只介绍它扩展的属性"),
      PrimaryHeaderLabelText(
        "title",
        "标题",
      ),
      PrimaryHeaderLabelText(
        "subtitle",
        "子标题",
      ),
      PrimaryHeaderLabelText(
        "isThreeLine",
        "设置组件为三行，在有副标题的情况，默认为两行的高度，启用这个属性会变成3行的高度，影响"
            "secondary的文本位置",
      ),
      PrimaryHeaderLabelText(
        "dense",
        "紧凑模式，在空间比较小的场景下可以开启",
      ),
      PrimaryHeaderLabelText(
        "secondary",
        "次要文本",
      ),
      PrimaryHeaderLabelText(
        "controlAffinity",
        "按钮位置，默认根据平台来，有的平台习惯性放左边，有的平台习惯性放右边",
      ),
      PrimaryHeaderLabelText(
        "contentPadding",
        "内容边距",
      ),
      PrimaryHeaderLabelText(
        "shape",
        "组件边框",
      ),
      PrimaryHeaderLabelText(
        "tileColor",
        "组件背景色",
      ),
      PrimaryHeaderLabelText(
        "selectedTileColor",
        "组件选中状态背景色，需要结合selected属性才生效",
      ),
      PrimaryHeaderLabelText(
        "selected",
        "组件选中状态（神奇，为啥它不自动根据value groupValue比较判断，有点多此一举）",
      ),
      PrimaryHeaderLabelText(
        "enableFeedback",
        "启用操作反馈，根据不同平台会有不同的效果，比如移动端可能是震动而桌面端是点击音效",
      ),
    ];
  }
}

class _RadioExample extends StatelessWidget {
  const _RadioExample();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    int? selectedValue = 1;
    return StatefulBuilder(builder: (context, setState) {
      //局部方法定义
      void onChanged(value) {
        setState(() => selectedValue = value);
      }

      return Wrap(
        children: List.generate(3, (index) {
          return Radio(
            value: index + 1,
            groupValue: selectedValue,
            onChanged: onChanged,
            toggleable: true,
            //dart switch语法糖，类似kotlin可以用于返回不同分支的值
            //_用于表示默认匹配，在这里因为index是int类型，默认匹配也可以写成int()，这表示这
            // 个switch语句匹配的是int类型
            fillColor: WidgetStatePropertySingle(
                selected: switch (index) {
              0 => Colors.red,
              1 => Colors.green,
              _ => Colors.blue,
            }),
            activeColor: theme.colorScheme.secondary,
            overlayColor: WidgetStatePropertySingle(
              selected: switch (index) {
                0 => Colors.red,
                1 => Colors.green,
                _ => Colors.blue,
              }
                  .withAlpha(kRadialReactionAlpha),
            ),
            splashRadius: 40,
          );
        }),
      );
    });
  }
}

class _RadioListTileExample extends StatelessWidget {
  const _RadioListTileExample();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    int? selectedValue = 1;
    return StatefulBuilder(builder: (context, setState) {
      //局部方法定义
      void onChanged(value) {
        setState(() => selectedValue = value);
      }

      return Wrap(
        runSpacing: 5,
        children: List.generate(3, (index) {
          return RadioListTile(
            value: index + 1,
            groupValue: selectedValue,
            onChanged: onChanged,
            toggleable: true,
            //dart switch语法糖，类似kotlin可以用于返回不同分支的值
            //_用于表示默认匹配，在这里因为index是int类型，默认匹配也可以写成int()，这表示这
            // 个switch语句匹配的是int类型
            fillColor: WidgetStatePropertySingle(
                selected: switch (index) {
              0 => Colors.red,
              1 => Colors.green,
              _ => Colors.blue,
            }),
            //这里注意，activeColor并非优先级比fillColor低就没用，它也将被用于ListTile的
            // 文本颜色设置
            activeColor: switch (index) {
              0 => Colors.red,
              1 => Colors.green,
              _ => Colors.blue,
            },
            title: Text(switch (index) {
              0 => "red",
              1 => "green",
              _ => "blue",
            }),
            subtitle: const Text("subtitle"),
            secondary: const Text("secondary"),
            isThreeLine: true,
            dense: true,
            controlAffinity: ListTileControlAffinity.platform,
            contentPadding:
                const EdgeInsetsDirectional.symmetric(horizontal: 20),
            tileColor: switch (index) {
              0 => Colors.red,
              1 => Colors.green,
              _ => Colors.blue,
            },
            selected: selectedValue == index + 1,
            selectedTileColor: theme.colorScheme.surfaceContainer,
            enableFeedback: true,
          );
        }),
      );
    });
  }
}
